import moment from "moment";
import QRCode from "qrcode";
import createImageByWorld from "@/utils/createPicture";

const state = {
  qrcodeList: [],
  srcList: []
};
const mutations = {
  ADD_IMG: (state, url) => {
    state.qrcodeList.unshift({
      url: url,
      name: new Date().getTime() + ".png",
      time: moment().format("YYYY-MM-DD HH:mm:ss")
    });
    state.srcList.unshift(url);
  },
  DEL_IMG: (state, index) => {
    state.qrcodeList.splice(index, 1)
  }
};
const actions = {
  addImg({ commit }, url) {
    commit("ADD_IMG", url);
  },
  delImage({ commit }, index) {
    commit("DEL_IMG", index);
  },
  createQrcodeWithWorld({ commit }, { text, opts, size, world, color, picture }) {
    const x = size * 0.4;
    const y = size * 0.4;
    const lw = size * 0.2;
    const lh = size * 0.2;
    const canves = document.createElement("canvas");
    canves.width = size;
    canves.height = size;
    QRCode.toCanvas(canves, text, opts, (error) => {
      if (error) {
        console.log(error);
        return;
      }
      if (world || picture) {
        let image;
        if (world) {
          image = createImageByWorld(world, size, color);
        } else {
          image = new Image();
          image.src = picture;
        }
        image.onload = () => {
          const ctx = canves.getContext("2d");
          ctx.drawImage(image, x, y, lw, lh);
          commit("ADD_IMG", canves.toDataURL("image/png"));
        };
      } else {
        commit("ADD_IMG", canves.toDataURL("image/png"));
      }
    });
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions
};
